<!-- <p>
  cusindex works!
  customno is {{customno}}
</p>
-->
<div>
  <div>
    <p class="textCenter">
      <img [src]="weChatHeah" style="width:30%;border:1px solid #969696;border-radius:50%;"/>
    </p>
    <p class="textCenter"><span>{{weChatName}}</span></p>
  </div>
  <div class="content">
    <!--我的卡券 -->
    <div id="card">
        <div (click) ="cardClick()" id="cardList"> 
          <div>
              <label><img src="assets/img/card.png" style="width:6%; margin-right: 8px; margin-bottom: -4px;"/></label>
              <label>我的卡券</label>
              <div *ngIf="cardlength!=0 && fcustomlength" class="numberStyle">{{cardlength}}</div>
              <div *ngIf="cardlength == 0 || customlength" class="nonumberStyle">暂无卡券</div>
          </div>
        </div>
        <ul *ngIf="isCard" class="cardType">
            <li *ngFor="let card of cards" >
              <div style="border:1px solid #969696;overflow: hidden;">
                <div class="cardkindtype">
                  <label>{{card.cardkind.cardkindtype}}</label>
                </div>
                <div class="cardkindname">
                    <label>{{card.cardkind.cardkindname}}</label>
                    <label *ngIf=" card.cardkind.balancetype == '金额结算' "  style="float:right;">余额:{{card.surplussales}}￥</label>
                    <label *ngIf=" card.cardkind.balancetype == '次数结算' " style="float:right;">余额:{{card.surplustimes}}次</label>
                </div>
              </div>
            </li>
          </ul>
    </div>
    <!--消费记录 -->
    <div id="consume">
        <div (click) ="consumeList()" id="consumeList"> 
            <div>
              <label><img src="assets/img/consume.png" style="width:6%; margin-right: 8px; margin-bottom: -4px;"/></label>
              <label>查看消费记录</label>
              <label *ngIf=" !customlength" class="up" [ngClass]="{'down': isConsume == true}" >></label>
              <div *ngIf=" customlength || customStatu==0" class="nonumberStyle">暂未消费</div>
            </div>
        </div>
        <ul *ngIf="isConsume">
          <li *ngFor="let list of consumelist; let i=index;" class="consumeContent" >
            <div class="consumelistLeft">
              <p>{{list.proname}}</p>
              <p style="padding-left:10%;">
                <span>{{list.proprice}}(元)*{{list.procount}}</span>
                <span class="consumeTime">{{list.consumetime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
              </p>
            </div>
            <div class="consumelistRight">
                <p>
                  <span>{{list.pay_total}}￥</span>
                </p>
            </div>
          </li>
        </ul>
    </div>
  </div>
  
</div>
